<script setup>
import topNav from "../../components/topNav.vue";
import { introApi } from "@/services/index";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
// import topNav from "../../components/topNav.vue";
import { operation } from "@/utils/num.js";
import {
  appScTransferTarget,
  appShopSelector,
  scTransferSign,
} from "@/services/transfer";

const showSelect = ref("");

if (uni.getStorageSync("selectShopType")) {
  showSelect.value = uni.getStorageSync("selectShopType");
}
const topHeight = ref(uni.getStorageSync("topHight") || 0);
const selectType = ref(1);
const isTime = ref(false);
const isType = ref(false);
const keyword = ref("");
const form = ref({
  pageIndex: 1,
  pageSize: 20,
  available: "",
  keyword: "",
  targetShopId: "",
  status: "",
});
const userObj = ref({});
const options1 = ref([]);
const options2 = ref([]);
const options4 = ref([
  { label: "已取消", value: "6" },
  { label: "待签收", value: "3" },
  { label: "已签收", value: "12" },
]);
const openDropdown = ref(false);
onReachBottom(() => {
  console.log("触底了");
  getAppProductQuery();
});

onLoad((options) => {
  if (uni.getStorageSync("user")) {
    userObj.value = JSON.parse(uni.getStorageSync("user"));
  }
  options1.value = [userObj.value];
  getAppShopSelector();
});
onShow(() => {
  getAppProductQuery(1);
});

// 门店选择
const getAppShopSelector = async () => {
  let res = await appShopSelector({});
  options2.value = res.data.datas;
  options1.value = res.data.datas;
};

const productData = ref([]);

const loading = ref("");
const getAppProductQuery = async (index) => {
  if (index == 1) {
    productData.value = [];
    loading.value = "";
  }
  if (index) {
    form.value.pageIndex = index;
  }
  if (loading.value == "noMore") {
    return;
  }
  loading.value = "Loading";
  try {
    let res = await appScTransferTarget(form.value);
    if (res.code == 200) {
      productData.value = productData.value.concat(res.data.datas);
      console.log(productData.value);
      form.value.pageIndex = form.value.pageIndex + 1;

      if (res.data.datas.length < form.value.pageSize) {
        loading.value = "noMore";
      } else {
        loading.value = "More";
      }
    } else {
    }

    console.log(res);
  } catch (e) {}
};
const select_one = ref("");
const select_two = ref("");
const select_three = ref("");
const select_from = ref("");

const uDropdownRef = ref(null);
function clerselect() {
  form.value.targetShopId = "";
  form.value.status = "";
  select_one.value = "";
  select_two.value = "";
  select_three.value = "";
  select_from.value = "";
}
const closeDropdown = () => {
  uDropdownRef.value.close();
};

const onSelectOne = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_one.value = item.id;
  form.value.targetShopId = item.id;

  getAppProductQuery(1);
};
const onSelectTwo = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_two.value = item.id;
  console.log(select_two.value);
};

const onSelectForm = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_from.value = item.value;
  form.value.status = item.value;
  getAppProductQuery(1);
};

const onDetail = (item) => {
  console.log(item);
  uni.navigateTo({
    url: "/pages/transfer/record_det/index?id=" + item.id + "&type=2",
  });
};
const isshowpr = ref(false);
const openfun = () => {
  if (isshowpr.value) {
    return;
  }
  if (openDropdown.value == false) {
    openDropdown.value = true;
  }
};
const closefun = () => {
  if (isshowpr.value) {
    return;
  }
  isshowpr.value = true;
  openDropdown.value = false;
  isshowpr.value = false;
};

const passwordShow = ref(false);
const isshowpassword = ref(false);
const selectItem = ref({});
const password = ref("");

const upQs = (item) => {
  passwordShow.value = true;
  isshowpassword.value = false;
  password.value = "";
  selectItem.value = item;
};
const isUp = ref(false);
const qrUpSign = async () => {
  if (!password.value) {
    uni.showToast({
      title: "请输入登录密码",
      icon: "none",
    });
    return;
  }

  if (isUp.value) {
    return;
  }
  isUp.value = true;
  try {
    let res = await scTransferSign({
      id: selectItem.value.id,
      password: password.value,
    });
    if (res.code == 200) {
      uni.showToast({
        title: "签收成功",
        icon: "none",
      });
      passwordShow.value = false;
      isUp.value = false;
      getAppProductQuery(1);
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none",
      });

      isUp.value = false;
    }

    console.log(res);
  } catch (e) {
    uni.showToast({
      title: e.msg,
      icon: "none",
    });
    isUp.value = false;
  }
};

const ChangeFun = () => {
  clerselect();
};
const searchFun = () => {
  getAppProductQuery(1);
};
</script>

<template>
  <view class="bg">
    <topNav
      :title="'签收记录'"
      @save="saveFun"
      :border="true"
      rType="save"
    ></topNav>
    <view
      class="top"
      :class="!openDropdown ? 'top-open' : ''"
      :style="'top: calc( 88rpx + ' + topHeight + 'px);'"
    >
      <view class="search-k">
        <up-search
          placeholder="单据编号/操作人"
          v-model="form.keyword"
          @change="ChangeFun"
          @search="searchFun"
          :showAction="false"
        ></up-search>
      </view>
      <view class="select-list">
        <up-dropdown ref="uDropdownRef" @open="openfun()" @close="closefun()">
          <!-- :options="options1" -->
          <up-dropdown-item title="调入">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  @click="onSelectOne(item)"
                  class="index-item"
                  v-for="(item, index) in options1"
                  :key="index"
                  :class="item.id == select_one ? 'active' : ''"
                >
                  {{ item.name }}</view
                >
              </scroll-view>
            </view>
          </up-dropdown-item>
          <!-- <up-dropdown-item title="调出">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  @click="onSelectTwo(item)"
                  class="index-item"
                  v-for="(item, index) in options2"
                  :key="index"
                  :class="item.id == select_two ? 'active' : ''"
                >
                  {{ item.name }}</view
                >
              </scroll-view>
            </view></up-dropdown-item
          > -->
          <!-- <up-dropdown-item title="时间"></up-dropdown-item> -->
          <up-dropdown-item title="状态">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  @click="onSelectForm(item)"
                  class="index-item"
                  v-for="(item, index) in options4"
                  :key="index"
                  :class="item.value == select_from ? 'active' : ''"
                >
                  {{ item.label }}</view
                >
              </scroll-view>
            </view>
          </up-dropdown-item>
        </up-dropdown>
      </view>
    </view>
    <!-- :style="'z-index:' + (openDropdown ? 0 : 10) + ';'" -->
    <view class="content">
      <view
        class="content-item"
        v-for="(item, index) in productData"
        :key="index"
        @click.stop="onDetail(item)"
      >
        <view class="content-title"
          ><text>单据编号：{{ item.id }}</text
          ><text
            :class="
              item.status == 3
                ? 'orange'
                : item.status == 6
                ? 'info'
                : item.status == 12
                ? 'green'
                : ''
            "
            >{{ item.statusText }}</text
          ></view
        >
        <view class="content-info">
          <view class="content-info-left">
            <view class="content-info-left-item">
              <view class="one"></view>
              <view class="line"></view>
              <view class="two"></view>
            </view>
            <view class="content-info-sm">
              <view
                ><text>{{ item.sourceShop }} · {{ item.createBy }}</text>
              </view>
              <view class="two"
                ><text
                  >{{ item.targetShop }} ·
                  {{ item.approveBy ? item.approveBy : "-" }}</text
                ></view
              >
            </view>
          </view>
          <view class="content-info-right">
            <view class="content-info-right-item" v-if="item.totalAmount > 0"
              >¥{{ item.totalAmount }}</view
            >
            <view class="content-info-right-text">{{ item.totalNum }}件</view>
          </view>
        </view>
        <view class="content-time"
          ><text>调货时间：{{ item.createTime }}</text>
          <text class="red">
            <text v-if="item.totalReturnNum > 0" class="red"
              >退{{ item.totalReturnNum }}件,￥{{
                item.totalReturnAmount ? "¥" + item.totalReturnAmount : ""
              }}</text
            ></text
          >
        </view>
        <view
          v-permission="['shop:scTransfer:sign']"
          class="bt-to"
          @click.stop
          v-if="item.status == 3 && showSelect == 'shop'"
        >
          <view class="nt-qs-view"
            ><up-button
              v-if="item.status == 3"
              class="nt-qs"
              type="primary"
              text="确认签收"
              @click="upQs(item)"
            ></up-button
          ></view>
        </view>
        <view
          v-permission="['manager:scTransfer:sign']"
          class="bt-to"
          @click.stop
          v-if="item.status == 3 && showSelect == 'admin'"
        >
          <view class="nt-qs-view"
            ><up-button
              v-if="item.status == 3"
              class="nt-qs"
              type="primary"
              text="确认签收"
              @click="upQs(item)"
            ></up-button
          ></view>
        </view>
      </view>

      <view
        class="noData"
        v-if="productData.length <= 0 && loading == 'noMore'"
      >
        <view class="noData-img">
          <image src="@/static/nodate/datas.png" mode="scaleToFill" />
          <view>暂无商品 </view>
        </view>
      </view>
      <view class="loading-form" v-if="loading && productData.length > 0"
        ><van-loading size="24rpx" v-if="loading == 'Loading'"
          ><text class="loading-text">加载中...</text>
        </van-loading>
        <text class="loading-text" v-if="loading == 'More'">加载更多</text>
        <text class="loading-text" v-if="loading == 'noMore'"
          >~没有数据了~</text
        >
      </view>
    </view>
  </view>

  <up-popup
    :show="passwordShow"
    round="15"
    mode="center"
    @close="passwordShow = false"
  >
    <view class="pop-content">
      <view class="pop-content-info">
        <view class="title"> 请输入登录密码校验 </view>
        <view class="content-to">
          <up-input
            class="input"
            placeholder="请输入登录密码"
            suffixIcon="map-fill"
            v-model="password"
            suffixIconStyle="color: #909399"
            :type="!isshowpassword ? 'password' : 'text'"
          >
            <!-- eye-off -->
            <template #suffix>
              <up-icon
                @click="isshowpassword = !isshowpassword"
                :name="!isshowpassword ? 'eye-fill' : 'eye-off'"
                color="#86909C"
                size="36rpx"
              ></up-icon>
            </template>
          </up-input>
        </view>
      </view>

      <view class="btns">
        <view class="btns-bt" @click="passwordShow = false">取消</view>

        <view class="btns-qd" @click="qrUpSign">确定</view></view
      >
    </view>
  </up-popup>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
